<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="mui/mui.min.css">
    <link rel="stylesheet" href="mui/mui.picker.min.css">
    <link rel="stylesheet" href="mui/mui.showLoading.css">
    <link rel="stylesheet" href="css/game.css?20180821">
    <script src="js/flexible.js"></script>
    <title>抽奖</title>
</head>

<body>
    <div id="app" class="app">
        <div class="top_p">
            <div class="top">
                <div class="left_logo" id="left_logo" style="display: none;">
                    <img src="img/right_logo.png?20180821" alt="">
                </div>
                <!-- <div class="right_logo">
                    <div class="text">抽奖次数:</div>
                    <div class="img">
                        <ul>
                            <li>
                                <img src="img/plane.png" alt="">
                            </li>
                            <li>
                                <img src="img/plane.png" alt="">
                            </li>
                            <li>
                                <img src="img/plane.png" alt="">
                            </li>
                            <li>
                                <img src="img/plane.png" alt="">
                            </li>
                        </ul>
                    </div>
                </div> -->
            </div>
        </div>
        <div class="content">
            <div class="prize">
                <ul>
                    <li>
                        <div class="slotMachine" id="machine1">
                            <div :class="'slot '+'slot'+(index+1)" v-for="(item,index) in prizes">
                                <img :src="item.prize_url+'?20180821'" alt="">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="slotMachine" id="machine2">
                            <div :class="'slot '+'slot'+(index+1)" v-for="(item,index) in prizes">
                                <img :src="item.prize_url+'?20180821'" alt="">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="slotMachine" id="machine3">
                            <div :class="'slot '+'slot'+(index+1)" v-for="(item,index) in prizes">
                                <img :src="item.prize_url+'?20180821'" alt="">
                            </div>
                    </li>
                </ul>
                </div>
                <div class="parent">
                    <div class="btn_t">
                        <div class="game_rules" id="game_rules">游戏规则</div>
                        <!-- <div class="my_prize" id="my_prize">我的奖品</div> -->
                    </div>
                </div>
                <div class="btn_x" id="s_play">开始抽奖</div>
            </div>
            <div class="message" style="display: none;">
                <div class="rules_message" v-html="prizerules">
                    
                </div>
                <div class="prize_message">
                    <div class="title">恭喜您获得一等奖</div>
                    <div class="code_num">888888</div>
                    <div class="code">
                        <img src="img/wxm.png" alt="">
                    </div>
                    <div class="hint">
                        <p>保存中奖页面及兑换码 </p>
                        <p class="hint_p">扫描中奖页面的二维码进入长荣航空公众号，与客服联系；</p>
                    </div>
                </div>
                <div class="btn_x" id="return">返回抽奖</div>
            </div>
            <div class="footer">
                <div class="img" id="img"><img src="img/right_logo_h.png?20180821" alt=""></div>
                <div class="text" id="text" style="display: none;">分享可以增加抽奖机会</div>
            </div>
        </div>
        <script type="text/javascript" src="js/plugins/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/plugins/jquery.slotmachine.js?20170320"></script>
        <script src="mui/mui.min.js"></script>
        <script src="mui/mui.showLoading.js"></script>
        <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
        <script src="js/config.js"></script>
</body>
<script>
    window.onpageshow = function (event) {
        if (event.persisted) {
            window.location.reload()
        }
    };
    var url = appconfig.apiUrl;
    var theRequest = '';
    $(document).ready(function () {
        const el1 = document.querySelector('#machine1');
        const el2 = document.querySelector('#machine2');
        const el3 = document.querySelector('#machine3');
        var play = true;
        var machine1 = '';
        var machine2 = '';
        var machine3 = '';
        function onComplete(active) {
            setTimeout(function () {
                play = true;
                if (active == 3) {
                    window.location.href = "myPrize.html?id=" + this.theRequest.id + "&vip_id=" + theRequest.vip_id + "&status=3&t=" + new Date().getTime();
                } else {
                    window.location.href = "myPrize.html?id=" + this.theRequest.id + "&vip_id=" + theRequest.vip_id + "&status=1&t=" + new Date().getTime();
                }
            }, 500);
        };
        function playGame(num) {
            $("#machine2 .slot1").css({ "marginTop": "0" });
            machine1 = new SlotMachine(el1, {
                active: 1,
                delay: 1000,
                randomize() {
                    return num;
                }
            });
            machine2 = new SlotMachine(el2, {
                active: 2,
                delay: 1000,
                randomize() {
                    return num;
                }
            });
            machine3 = new SlotMachine(el3, {
                active: 3,
                delay: 1000,
                randomize() {
                    return num;
                }
            });
            var a = geUrl();
            event.stopPropagation();
            machine1.shuffle(10);
            setTimeout(function () {
                machine2.shuffle(10);
            }, 500);

            setTimeout(function () {
                machine3.shuffle(10, onComplete);
            }, 1000);
        };
        $("#s_play").click(function (event) {
            var num = 1;
            var param = {
                id: theRequest.id,
                vip_id: theRequest.vip_id
            }
            if (play) {
                play = false;
                mui.showLoading('抽奖中');
                axios({
                    method: "POST",
                    url:url+'/luckdraw/doLuckDraw',
                    data: param
                }).then(function (res) {
                    mui.hideLoading();
                    if (res.data.code == "0") {
                        var data = res.data.data;
                        var grade = data.luck_draw_item_info.grade;
                        var type = data.type;

                        localStorage.setItem("pirzeMessage", JSON.stringify(data));
                        playGame(grade);
                    } else if (res.data.code == "-1") {
                        play = true;
                        mui.alert(res.data.msg, " ")
                    }
                }).catch(function (err) {
                    console.log(err);
                    mui.hideLoading();
                    console.log(err);
                    mui.alert("服务器异常", " ")
                });
            }
        });
        $("#x_play").click(function (event) {
            $("#machine2 .slot1").css({ "marginTop": "0" });
            var num = 3;
            playGame(num);
        });
        function geUrl() {
            var theRequest = {};
            var url = decodeURIComponent(location.search); //获取url中"?"符后的字串
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        };
        function isShow(val) {
            if (val == "rules") {
                $('.content').hide();
                $('.message').show();
                $('.rules_message').show();
                $('.prize_message').hide();
                $('#img').hide();
                $('#text').show();
                $('#left_logo').show();
            } else if (val == "prize") {
                $('.content').hide();
                $('.message').show();
                $('.rules_message').hide();
                $('.prize_message').show();
                $('#img').hide();
                $('#text').show();
                $('#left_logo').hide();
            } else if (val == "return") {
                $('.content').show();
                $('.message').hide();
                $('.rules_message').show();
                $('.prize_message').hide();
                $('#img').show();
                $('#text').hide();
                $('#left_logo').hide();
            }
        };
        $("#game_rules").click(function () {
            isShow('rules');
        })
        $("#my_prize").click(function () {
            isShow('prize');
        })
        $("#return").click(function () {
            isShow('return');
        })
    });
    let vm = new Vue({
        el: "#app",
        data: {
            message: false,
            prize: true,
            prizeMessage: true,
            rulesMessage: true,
            theRequest: '',
            prizes: [],
            prizerules: '',
            url: appconfig.apiUrl
        },
        methods: {
            geUrl: function () {
                var theRequest = {};
                var url = decodeURIComponent(location.search); //获取url中"?"符后的字串
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            },
            getMessage: function () {
                var self = this;
                mui.showLoading('');
                var param = {
                    id: theRequest.id,
                }
                axios({
                    method: "POST",
                    url:url+'/luckdraw/queryLuckDraw',
                    data: param
                }).then(function (res) {
                    mui.hideLoading();
                    if (res.data.code == "0") {
                        var data = res.data.data;
                        self.prizes = data.luck_draw_item_array;
                        self.prizerules = data.rule;
                    } else if (res.data.code == "-1") {
                        mui.alert("获取奖品信息失败", " ")
                    }
                }).catch(function (err) {
                    console.log(err);
                    mui.hideLoading();
                    console.log(err);
                    mui.alert("服务器异常", " ")
                });
            }
        },
        mounted() {
            theRequest = this.geUrl();
            this.getMessage();
        }
    })
</script>
</script>

</html>